<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>商品管理</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../lib/layui-v2.5.5/css/layui.css" media="all">
		<link rel="stylesheet" href="../../../css/layuicmspublic.css" media="all">
		<link rel="stylesheet" href="../../../css/public.css" media="all">
	</head>

	<body>
		<div class="layuimini-container">
			<div class="layuimini-main">
				<fieldset class="layui-elem-field layuimini-search">
					<legend>搜索信息</legend>
					<div style="margin: 10px 10px 10px 10px">
						<form class="layui-form layui-form-pane" action="" id="searchFrm">
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">供应商名称</label>
									<div class="layui-input-inline">
										<select name="providerid" id="providerid" class="providerSelect">
											<option value="">请选择供应商</option>
										</select>
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">商品名称</label>
									<div class="layui-input-inline">
										<input type="text" name="goodsname" autocomplete="off" class="layui-input" placeholder="请输入商品名称">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">生产批号</label>
									<div class="layui-input-inline">
										<input type="text" name="productcode" autocomplete="off" class="layui-input" placeholder="请输入生产批号">
									</div>
								</div>
							</div>
							<div class="layui-form-item">
								<div class="layui-inline">
									<label class="layui-form-label">批准文号</label>
									<div class="layui-input-inline">
										<input type="text" name="promitcode" autocomplete="off" class="layui-input" placeholder="请输入批准文号">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">描述</label>
									<div class="layui-input-inline">
										<input type="text" name="description" autocomplete="off" class="layui-input" placeholder="请输入描述">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">规格</label>
									<div class="layui-input-inline">
										<input type="text" name="size" autocomplete="off" class="layui-input" placeholder="请输入规格">
									</div>
								</div>
								<div class="layui-form-item">
									<div class="layui-block" style="text-align: center;">
										<a class="layui-btn" lay-submit="" lay-filter="data-search-btn">
											<i class="layui-icon layui-icon-search"></i>搜索</a>
										<a class="layui-btn layui-btn-warm" lay-submit="" lay-filter="data-reset-btn">
											<i class="layui-icon layui-icon-refresh"></i>重置</a>
									</div>
								</div>
							</div>
						</form>
					</div>
				</fieldset>
				<!--表格开始-->
				<table class="layui-hide" id="goodsTable" lay-filter="goodsFilter"></table>
				<script type="text/html" id="availableTpl">
					<input type="checkbox" name="available" value="{{d.id}}" lay-skin="switch" lay-text="可用|不可用" lay-filter="availableSwitch" {{ d.available == 1 ? 'checked' : '' }}>
				</script>
				<script type="text/html" id="goodsToolBar">
					<a class="layui-btn layui-btn-sm btn-add" lay-event="addGoods">
						<i class="layui-icon layui-icon-addition"></i>添加商品</a>
					<a class="layui-btn layui-btn-sm layui-btn-danger data-count-delete" lay-event="batchdelete">
					<i class="layui-icon layui-icon-delete"></i>批量删除</a>
				</script>
				<script type="text/html" id="goodsBar">
					<a class="layui-btn layui-btn-xs btn-update" lay-event="update">编辑</a>
					<a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
				</script>
				<!--表格结束-->

				<!--添加和修改的弹层开始-->
				<div id="addOrUpdateDiv" style="display: none; padding: 0.3125rem;">
					<form method="post" class="layui-form layui-form-pane" lay-filter="dataFilter" id="dataFrm">
						<div class="layui-col-md12 layui-col-xs12">
							<div class="layui-row layui-col-space10">
								<div class="layui-col-md9 layui-col-xs7">
									<div class="layui-form-item magt3">
										<label class="layui-form-label">供应商</label>
										<div class="layui-input-block">
											<select name="providerid" class="providerSel">
												<option value="">请选择供应商</option>
											</select>
										</div>
									</div>
									<div class="layui-form-item magt3">
										<label class="layui-form-label">商品名称</label>
										<div class="layui-input-block">
											<input type="hidden" name="id" />
											<input type="text" name="goodsname" class="layui-input" lay-verify="required" placeholder="请输入商品名称">
										</div>
									</div>
									<div class="layui-form-item magt3">
										<label class="layui-form-label">商品描述</label>
										<div class="layui-input-block">
											<input type="text" name="description" class="layui-input" lay-verify="required" placeholder="请输入商品描述">
										</div>
									</div>
								</div>
								<div class="layui-col-md3 layui-col-xs5">
									<div class="layui-upload-list thumbBox mag0 magt3 goodsFaceBtn">
										<input type="hidden" name="goodsimg" id="goodsimg" />
										<img class="layui-upload-img thumbImg">
									</div>
								</div>
							</div>
							<div class="layui-form-item magb0">
								<div class="layui-inline">
									<label class="layui-form-label">产地</label>
									<div class="layui-input-inline">
										<input type="text" name="produceplace" class="layui-input " lay-verify="required" placeholder="请输入商品产地">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">包装</label>
									<div class="layui-input-inline">
										<input type="text" name="goodspackage" class="layui-input " lay-verify="required" placeholder="请输入商品包装">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">规格</label>
									<div class="layui-input-inline">
										<input type="text" name="size" class="layui-input " lay-verify="required" placeholder="请输入商品规格">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">生产批号</label>
									<div class="layui-input-inline">
										<input type="text" name="productcode" class="layui-input " lay-verify="required" placeholder="请输入商品生产批号">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">批准文号</label>
									<div class="layui-input-inline">
										<input type="text" name="promitcode" class="layui-input " lay-verify="required" placeholder="请输入商品批准文号">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">销售价格</label>
									<div class="layui-input-inline">
										<input type="text" name="price" class="layui-input " lay-verify="required" placeholder="请输入商品价格">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">库存量</label>
									<div class="layui-input-inline">
										<input type="text" name="number" class="layui-input " lay-verify="required" placeholder="请输入商品库存量">
									</div>
								</div>
								<div class="layui-inline">
									<label class="layui-form-label">预警值</label>
									<div class="layui-input-inline">
										<input type="text" name="dangernum" class="layui-input " lay-verify="required" placeholder="请输入商品库存预警值">
									</div>
								</div>
							</div>
						</div>
						<div class=class="layui-form-item" style="text-align: center;">
							<a class="layui-btn" lay-submit="" lay-filter="doSubmit">
								<i class="layui-icon layui-icon-release"></i>立即提交</a>
						</div>
					</form>
				</div>
				<!--添加和修改的弹层结束-->
			</div>
		</div>

		<script src="../../../lib/layui-v2.5.5/layui.js" charset="utf-8"></script>
		<script src="../../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/jquery.cookie.min.js" charset="utf-8"></script>
		<script src="../../../lib/common/common.js" charset="utf-8"></script>

		<script>
			layui.use(['form', 'table', 'layer','upload'], function() {
				var $ = layui.jquery,
					form = layui.form,
					table = layui.table,
					layer = layui.layer
					upload = layui.upload;

				/**
				 * 加载查询条件里面的供应商下拉列表
				 */
				$.get(api + "provider/getAllAvailableProvider", function(res) {
					var providerid = $("#providerid");
					var data = res.data;
					var html = "<option value = ''> 请选择供应商 </option>";
					$.each(data, function(index, item) {
						html += "<option value = " + item.id + ">" + item.providername + "</option>";
					});
					providerid.html(html);
					form.render("select");
				})

				/**
				 * 加载 数据
				 */
				var tableIns = table.render({
					elem: '#goodsTable',
					url: api + 'goods/loadAllGoods',
					title: '菜单数据表',
					toolbar: '#goodsToolBar',
					height: 'full-220',

					cols: [
						[{
								type: "checkbox",
								fixed: "left"
							},
							{
								field: 'providername',
								title: '供应商名称',
								align: "center",
								width: 120
							},
							{
								field: 'goodsname',
								title: '商品名称',
								align: "center",
								width: 120
							},
							
							{
								field: 'produceplace',
								title: '产地',
								align: "center",
								width: 80
							},
							{
								field: 'size',
								title: '规格',
								align: "center",
								width: 90
							},
							{
								field: 'goodspackage',
								title: '包装',
								align: "center",
								width: 80
							},
							{
								field: 'productcode',
								title: '生产批号',
								align: "center",
								width: 120
							},
							{
								field: 'promitcode',
								title: '批准文号',
								align: "center",
								width: 120
							},

							{
								field: 'price',
								title: '销售价格',
								align: "center",
								width: 100
							},
							{
								field: 'number',
								title: '库存数量',
								align: "center",
								width: 100
							},
							{
								field: 'dangernum',
								title: '预警库存',
								align: "center",
								width: 100
							},
							{
								field: 'goodsimg',
								title: '商品图片',
								align: "center",
								width: 100,
								templet:function(d){
									if (d.goodsimg){
										return "<img width = 30 height = 30 src = '"+baseUrl+d.goodsimg+"'/>"
									}else{
										return '';
									}
								}
							},
							{
								field: 'description',
								title: '描述',
								align: "center",
								width: 200
							},
							{
								field: 'available ',
								title: '是否可用',
								align: "center",
								width: 120,
								templet: '#availableTpl'
							},
							{
								title: '操作',
								templet: '#goodsBar',
								fixed: "right",
								align: "center",
								width: 120
							}
						]
					],
					done: function(data, curr, count) {
						//不是第一页时，如果当前返回的数据为0那么就返回上一页
						if (data.data.length === 0 && curr !== 1) {
							tableIns.reload({
								page: {
									curr: curr - 1
								}
							})
						}
					},
					// limits: [10, 15, 20, 25, 50, 100],
					// limit: 10,
					page: true
				});

				/**
				 * 监听搜索操作
				 */ 
				form.on('submit(data-search-btn)', function(data) {
					var params = $("#searchFrm").serialize();

					//执行搜索重载
					table.reload('goodsTable', {
						page: {
							curr: 1
						},
						url: api + 'goods/loadAllGoods?' + params
					});
					return false;
				});

				/**
				 * 监听重置操作
				 */ 
				form.on('submit(data-reset-btn)', function(data) {
					$("#searchFrm")[0].reset(); // 清空搜索信息框中的数据
					//执行搜索重载
					table.reload('goodsTable', {
						page: {
							curr: 1
						},
						url: api + 'goods/loadAllGoods'
					});
					return false;
				});

				/**
				 * 监听表头的事件
				 */
				table.on('toolbar(goodsFilter)', function(obj) {
					var checkStatus = table.checkStatus(obj.config.id);
					switch (obj.event) {
						case 'batchdelete':
							batchdelete();
							break;
						case 'addGoods':
							addGoods();
							break;
					};
				});

				/**
				 * 监听行数据的事件
				 */ 
				table.on('tool(goodsFilter)', function(obj) {
					var data = obj.data; // 获得当前行数据
					if (obj.event === 'delete') {
						layer.confirm('真的删除行么？', {
							icon: 3,
							title: '提示'
						}, function(index) {
							$.post(api + 'goods/deleteGoods', {
									id: data.id
								},
								function(res) {
									if (res.code == 200) {
										tableIns.reload();
									}
									layer.msg(res.msg);
								})
							layer.close(index);
						});
					} else if (obj.event == 'update') {
						updateGoods(data);
					}
				});

				/**
				 * 监听按钮
				 */
				form.on('switch(availableSwitch)', function(obj) {
					$.post(api + 'goods/updateGoods', {
						id: this.value,
						available: obj.elem.checked ? 1 : 0
					}, function(res) {
						// layer.msg(res.msg)
					})
				});

				/**
				 * 批量删除
				 */
				function batchdelete() {
					var checkStatus = table.checkStatus('goodsTable'); //goodsTable 即为基础参数 id 对应的值
					var data = checkStatus.data; //获取选中行的数据
					var length = checkStatus.data.length; //获取选中行数量，可作为是否有选中行的条件

					if (length == 0) {
						layer.msg('请选择要删除的行数据');
					} else {
						layer.confirm('真的要删除选中的这些数据么?', {
							icon: 3,
							title: '提示'
						}, function(index) {
							var ids = "";
							$.each(data, function(index, item) {
								if (index == 0) {
									ids += "ids=" + item.id;
								} else {
									ids += "&ids=" + item.id;
								}
							});
							$.post(api + 'goods/batchDeleteGoods', ids,
								function(res) {
									if (res.code == 200) {
										tableIns.reload();
									}
									layer.msg(res.msg);
								})
							layer.close(index);
						});
					}
				}


				/**
				 * 打开添加商品弹出层
				 */
				var mainIndex;
				var url; // 动态的url
				function addGoods() {
					mainIndex = layer.open({
						type: 1,
						title: '添加商品',
						area: ['700px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							url = api + "goods/addGoods";
							$("#dataFrm")[0].reset();
							$('.thumbImg').attr('src','');
							$('#goodsimg').val('');
							$.get(api + "provider/getAllAvailableProvider", function(res) {
								var providerSel = $(".providerSel");
								var data = res.data;
								var html = "<option value = ''> 请选择供应商 </option>";
								$.each(data, function(index, item) {
									html += "<option value = " + item.id + ">" + item.providername + "</option>";
								});
								providerSel.html(html);
								form.render("select");
							})
						}
					})
				}
				/**
				 * 打开商品管理的编辑弹出层
				 */
				function updateGoods(data) {
					mainIndex = layer.open({
						type: 1,
						title: '修改商品信息',
						area: ['700px'],
						content: $("#addOrUpdateDiv"),
						success: function(index) {
							if(data.goodsimg){
								$('.thumbImg').attr('src',baseUrl+data.goodsimg);
							} else {
								$('.thumbImg').attr('src','');
							}
							url = api + "goods/updateGoods";
							// 装载数据表格 	
							form.val("dataFilter", data);
							
						}
					})
				}

				/**
				 * 提交数据
				 */
				form.on('submit(doSubmit)', function(data) {
					var params = $("#dataFrm").serialize();
					$.post(url, params, function(res) {
						layer.msg(res.msg);
						if (res.code == 200) {
							tableIns.reload();
						}
						layer.close(mainIndex);
					})
					return false;
				});
				
				/**
				 * 绑定文件上传的控件
				 * 普通图片上传
				 */
				var uploadInst = upload.render({
					elem: '.goodsFaceBtn',
					url: api + 'file/uploadGoodsFile',
					field: "mf",//设定文件域的字段名	
						
					acceptMime: 'image/*',
					done: function(res) {
						//如果上传失败
						if (res.code > 0) {
							return layer.msg('上传失败');
						}
						//上传成功
						$('.thumbImg').attr('src',baseUrl+res.data.src);
						$('.thumbBox').css("background","#fff");
						$('#goodsimg').val(res.data.src);
					},
					
				});

			});
		</script>
		<script>

		</script>

	</body>
</html>
